<!-- 首页 -->
<template>
  <div class="stbox">  
    <el-container>  
      <el-main>  
        <el-row :gutter="20">  
          <el-col :span="24">  
            <h2>虚拟人活动概览</h2>  
            <el-card class="box-card">  
              <div slot="header" class="clearfix">  
                <span>互动次数</span>  
                <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>  
              </div>  
              <div class="interac" v-for="item in interactionData" :key="item.name">  
                <span>{{ item.name }}: {{ item.value }}</span> 
                <el-button class="interac-button" type="success"  @click="interactionClick(item)">查看详情</el-button> 
              </div>  
            </el-card>  
          </el-col>  
          <el-col :span="24">  
            <h2>虚拟人使用统计</h2>  
            <el-card class="box-card">  
              <div slot="header" class="clearfix">  
                <span>使用时长</span>  
                <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>  
              </div>  
              <div>  
                <div ref="timeChart" style="width: 100%; height: 400px;"></div>  
              </div>  
            </el-card>  
          </el-col>  
        </el-row>  
      </el-main>  
    </el-container>  
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      interactionData: [  
        { 
          name: '总互动次数',
           value: 785
           },  
        { 
          name: '今日互动次数', 
          value: 46 
        },  
        { 
          name: '昨日互动次数', 
          value: 39 
        },  
      ],  
      chart: null,  
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  created() { },
  mounted() {
    this.initTimeChart();  

  },
  // 里面的函数只有调用才会执行
  methods: {
    // 满意度变化
    initTimeChart() {
      let numberOption= {
        title: {  
          text: '虚拟人使用时长统计',  
        },  
        tooltip: {},  
        xAxis: {  
          data: ['2024-04-10', '2024-04-11', '2024-04-12', '2024-04-13', '2024-04-14', '2024-04-15', '2024-04-16'],  
        },  
        yAxis: {},  
        series: [{  
          name: '使用时长（小时）',  
          type: 'bar',  
          data: [3, 2, 3.6, 3, 2, 4, 3],  
        }],  
      
        
      }
      this.chart = Chart.init(this.$refs.timeChart)
      this.chart.setOption(numberOption)
    },
    //查看详情
    interactionClick(){
       this.$router.push('/interactionDetails')
    }



  }
};
</script>

<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.interac{
   height: 50px;

}
.interac-button{
    margin-left: 20px;
}


</style>